<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 4.2.0">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/logo.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/logo.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/logo.png">
  <link rel="mask-icon" href="/images/logo.png" color="#222">

<link rel="stylesheet" href="/css/main.css">


<link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css">

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"gitee.com","root":"/","scheme":"Pisces","version":"7.7.2","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":false,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"./public/search.xml"};
  </script>

  <meta name="description" content="click look more">
<meta property="og:type" content="article">
<meta property="og:title" content="面试最终版">
<meta property="og:url" content="https://gitee.com/mamba666/mamba666.git/2020/07/31/%E9%9D%A2%E8%AF%95%E9%A2%98%EF%BC%88%E6%9C%80%E7%BB%88%E7%89%88%EF%BC%89/index.html">
<meta property="og:site_name" content="共你云雨">
<meta property="og:description" content="click look more">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2020-07-31T02:07:45.295Z">
<meta property="article:modified_time" content="2021-07-11T08:33:24.918Z">
<meta property="article:author" content="Edison">
<meta name="twitter:card" content="summary">

<link rel="canonical" href="https://gitee.com/mamba666/mamba666.git/2020/07/31/%E9%9D%A2%E8%AF%95%E9%A2%98%EF%BC%88%E6%9C%80%E7%BB%88%E7%89%88%EF%BC%89/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true
  };
</script>

  <title>面试最终版 | 共你云雨</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>
	<a href="https://github.com/mamba666" target="_blank" rel="noopener" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <div>
      <a href="/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">共你云雨</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
    </div>
  </div>
</div>


<nav class="site-nav">
  
  <ul id="menu" class="menu">
        <li class="menu-item menu-item-home">

    <a href="/" rel="section"><i class="fa fa-fw fa-home"></i>首页</a>

  </li>
        <li class="menu-item menu-item-tags">

    <a href="/tags/" rel="section"><i class="fa fa-fw fa-tags"></i>标签</a>

  </li>
        <li class="menu-item menu-item-categories">

    <a href="/categories/" rel="section"><i class="fa fa-fw fa-th"></i>分类</a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/archives/" rel="section"><i class="fa fa-fw fa-archive"></i>归档</a>

  </li>
  </ul>

</nav>
</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content">
            

  <div class="posts-expand">
      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block " lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://gitee.com/mamba666/mamba666.git/2020/07/31/%E9%9D%A2%E8%AF%95%E9%A2%98%EF%BC%88%E6%9C%80%E7%BB%88%E7%89%88%EF%BC%89/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="Edison">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="共你云雨">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          面试最终版
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2020-07-31 10:07:45" itemprop="dateCreated datePublished" datetime="2020-07-31T10:07:45+08:00">2020-07-31</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="fa fa-calendar-check-o"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2021-07-11 16:33:24" itemprop="dateModified" datetime="2021-07-11T16:33:24+08:00">2021-07-11</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/%E9%9D%A2%E8%AF%95/" itemprop="url" rel="index"><span itemprop="name">面试</span></a>
                </span>
            </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <p>click look more</p>
<a id="more"></a>

<h1 id="ES6新特性"><a href="#ES6新特性" class="headerlink" title="ES6新特性"></a>ES6新特性</h1><h2 id="var-let-const"><a href="#var-let-const" class="headerlink" title="var let const"></a>var let const</h2><ol>
<li>关于变量提升的问题</li>
</ol>
<p>可以明确，let和const不存在变量提升，var存在变量提升。</p>
<p>先来看这段代码</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	log(a) <span class="comment">//undefined</span></span><br><span class="line">	<span class="keyword">var</span> a=<span class="number">1</span></span><br><span class="line">	log(a) <span class="comment">//1</span></span><br><span class="line">	log(b) <span class="comment">//undefined</span></span><br><span class="line">	<span class="keyword">var</span> b=<span class="number">2</span></span><br><span class="line">	log(b) <span class="comment">//2</span></span><br><span class="line">&#125;)();</span><br><span class="line"></span><br><span class="line">(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	log(c) <span class="comment">//Cannot access 'c' before initialization</span></span><br><span class="line">	<span class="keyword">let</span> c=<span class="number">1</span></span><br><span class="line">	log(c) <span class="comment">//1</span></span><br><span class="line">	log(d) <span class="comment">//Cannot access 'd' before initialization</span></span><br><span class="line">	<span class="keyword">let</span> d=<span class="number">2</span></span><br><span class="line">	log(d) <span class="comment">//2</span></span><br><span class="line">&#125;)()</span><br></pre></td></tr></table></figure>

<p>可以得出一个结论。即使在var之前使用变量也不会报错，但是使用let就会报错。Cannot access ‘d’ before initialization（无法在初始化之前访问d）。那么为什么会报错呢？初始化之前又是什么呢？</p>
<ul>
<li>什么是暂时性死区：即不能在初始化之前就使用变量，不然就报错。</li>
</ul>
<h3 id="JS变量的过程"><a href="#JS变量的过程" class="headerlink" title="JS变量的过程"></a>JS变量的过程</h3><p>JS变量会有三个过程：创建create、初始化initialize 和赋值assign</p>
<p>这里以var的那个函数举例子</p>
<ol>
<li>进入函数，为函数创建一个环境。</li>
<li>找到 fn 中所有用 var 声明的变量，在这个环境中「创建」这些变量（即 a 和 b）。</li>
<li>将这些变量「初始化」为 undefined。</li>
<li>开始执行代码</li>
</ol>
<p>所以，在没有执行代码之前，使用var声明的变量即使被使用，也会被显示为undefined。</p>
<h2 id="class"><a href="#class" class="headerlink" title="class"></a>class</h2><blockquote>
<p>基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。</p>
</blockquote>
<p>使用原生实现class，可以发现class就是通过原型实现的</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">A</span>(<span class="params">x,y</span>)</span>&#123;</span><br><span class="line">	<span class="keyword">this</span>.x=x</span><br><span class="line">	<span class="keyword">this</span>.y=y</span><br><span class="line">&#125;</span><br><span class="line">A.prototype.say=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	alert(<span class="string">"hello world"</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> a=<span class="keyword">new</span> A()</span><br><span class="line">a.say()</span><br><span class="line"></span><br><span class="line">----------------------</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">A</span></span>&#123;</span><br><span class="line">	<span class="keyword">constructor</span>(x,y)&#123;</span><br><span class="line">		<span class="keyword">this</span>.x=x</span><br><span class="line">		<span class="keyword">this</span>.y=y</span><br><span class="line">	&#125;</span><br><span class="line">	saying()&#123;</span><br><span class="line">		<span class="built_in">console</span>.log(<span class="string">'class create'</span>)</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> a=<span class="keyword">new</span> A()</span><br><span class="line">a.saying()</span><br></pre></td></tr></table></figure>

<ul>
<li>这里也涉及到了 new 这个语法糖，具体是干嘛的呢？</li>
</ul>
<ol>
<li>首先要明确， new 是一个语法糖，就是为了省代码</li>
</ol>
<h3 id="Object-getPrototypeOf"><a href="#Object-getPrototypeOf" class="headerlink" title="Object.getPrototypeOf()"></a>Object.getPrototypeOf()</h3><p>这个方法是直接在原型对象上添加方法，以后的所有基于它的实例对象都会继承这个方法。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">A</span></span>&#123;&#125;</span><br><span class="line"><span class="keyword">let</span> a=<span class="keyword">new</span> A</span><br><span class="line">log(<span class="built_in">Object</span>.getPrototypeOf(a)===A&#123;&#125;)  <span class="comment">//true</span></span><br></pre></td></tr></table></figure>

<h3 id="proto"><a href="#proto" class="headerlink" title="proto"></a><strong>proto</strong></h3><p>通过 下面的diamagnetic可以发现，Object.getPrototypeOf和<strong>proto</strong>作用是一样的。但是最好使用Object.getPrototypeOf代替<strong>proto</strong>。</p>
<p>因为<strong>proto</strong>并不是语言的本身特性，而是浏览器自带的，所以为了避免产生环境依赖，最好使用Object.getPrototypeOf代替之</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">A</span></span>&#123;&#125;</span><br><span class="line"><span class="keyword">let</span> a=<span class="keyword">new</span> A</span><br><span class="line">log(<span class="built_in">Object</span>.getPrototypeOf(a)) <span class="comment">//A&#123;&#125;</span></span><br><span class="line">log(a.__proto__) <span class="comment">//A&#123;&#125;</span></span><br></pre></td></tr></table></figure>

<h2 id="export-import"><a href="#export-import" class="headerlink" title="export/import"></a>export/import</h2><blockquote>
<p>模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// profile.js</span></span><br><span class="line"><span class="keyword">var</span> firstName = <span class="string">'Michael'</span>;</span><br><span class="line"><span class="keyword">var</span> lastName = <span class="string">'Jackson'</span>;</span><br><span class="line"><span class="keyword">var</span> year = <span class="number">1958</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> &#123; firstName, lastName, year &#125;;</span><br></pre></td></tr></table></figure>

<ul>
<li>通常情况下，export输出的变量就是本来的名字，但是可以使用as关键字重命名。</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">v1</span>(<span class="params"></span>) </span>&#123; ... &#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">v2</span>(<span class="params"></span>) </span>&#123; ... &#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> &#123;</span><br><span class="line">  v1 <span class="keyword">as</span> streamV1,</span><br><span class="line">  v2 <span class="keyword">as</span> streamV2,</span><br><span class="line">  v2 <span class="keyword">as</span> streamLatestVersion</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<ul>
<li>export输出的是动态实时的值，而之前的commonJS是缓存的值，不存在动态更新。</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 先输出bar，500ms后输出baz</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">var</span> foo = <span class="string">'bar'</span>;</span><br><span class="line">setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> foo = <span class="string">'baz'</span>, <span class="number">500</span>);</span><br></pre></td></tr></table></figure>

<ul>
<li>在其他模块使用export定义接口之后，就需要import加载这个其他模块。</li>
</ul>
<h2 id="new-Set"><a href="#new-Set" class="headerlink" title="new Set"></a>new Set</h2><blockquote>
<p>ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="keyword">set</span> = new Set([1, 2, 3, 4, 4]);</span><br><span class="line">log([...<span class="keyword">set</span>]) //[1,2,3,4]</span><br><span class="line">// add方法  添加某个值，返回 Set 结构本身。</span><br><span class="line"><span class="keyword">set</span>.add(1).add(7)</span><br><span class="line">log([...<span class="keyword">set</span>]) //[ 1, 2, 3, 4, 7 ]</span><br><span class="line">// delete方法  删除某个值，返回一个布尔值，表示删除是否成功。</span><br><span class="line">log(<span class="keyword">set</span>.delete(7))  // true</span><br><span class="line">// has方法 返回一个布尔值，表示该值是否为Set的成员。</span><br><span class="line">log(<span class="keyword">set</span>.has(7)) //false 之前已经被delete</span><br><span class="line">log(<span class="keyword">set</span>.has(6)) //false 不存在6</span><br><span class="line">log(<span class="keyword">set</span>.has(1)) //true</span><br><span class="line">//clear方法  清除所有成员，没有返回值 </span><br><span class="line"><span class="keyword">set</span>.clear()</span><br><span class="line">log([...<span class="keyword">set</span>]) //[]  空</span><br><span class="line">// size属性，返回实例对象的成员总数</span><br><span class="line">const items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);</span><br><span class="line">log(items.size) // 5</span><br></pre></td></tr></table></figure>

<h2 id="Symbol"><a href="#Symbol" class="headerlink" title="Symbol"></a>Symbol</h2><ol>
<li>为什么要引入Symbol?</li>
</ol>
<p>假如从别人那里获取了一个新的对象，但是想添加一个新的方法，那么这个创建的名字很可能就会重复。如果有一种机制，保证每个属性的名字都是独一无二的就好了，这样就从根本上防止属性名的冲突。</p>
<ol start="2">
<li>什么是Symbol？</li>
</ol>
<p>Symbol是ES6引入的，是JS的第七种数据类型（前六种分别为undefined、null、Boolean、String、Object、Number）。</p>
<ol start="3">
<li>如何使用Symbol？</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 直接使用Symbol</span></span><br><span class="line"><span class="keyword">let</span> s=<span class="built_in">Symbol</span>()</span><br><span class="line">log(s) <span class="comment">// Symbol()</span></span><br><span class="line"><span class="comment">// 给Symbol带一个参数，必须是字符串、数值、对象</span></span><br><span class="line"><span class="comment">// 如果 Symbol 的参数是一个对象，就会调用该对象的toString方法，将其转为字符串，然后才生成一个 Symbol 值。</span></span><br><span class="line"><span class="keyword">let</span> a=<span class="built_in">Symbol</span>(<span class="string">"hello"</span>)</span><br><span class="line"><span class="keyword">let</span> n=<span class="built_in">Symbol</span>(<span class="number">1</span>)</span><br><span class="line"><span class="keyword">let</span> o=<span class="built_in">Symbol</span>(&#123;&#125;)</span><br><span class="line">log(a) <span class="comment">// Symbol(hello)</span></span><br><span class="line">log(n) <span class="comment">// Symbol(1)</span></span><br><span class="line">log(o) <span class="comment">// Symbol(Obejct)</span></span><br><span class="line"><span class="comment">// 注意，Symbol函数的参数只是表示对当前 Symbol 值的描述，因此相同参数的Symbol函数的返回值是不相等的。</span></span><br></pre></td></tr></table></figure>

<h3 id="es2019新增description"><a href="#es2019新增description" class="headerlink" title="es2019新增description"></a>es2019新增description</h3><p>在之前，想要读取Symbol的描述，就需要将其转为字符串输出，不是很方便。而是用description就方便很多</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 旧</span></span><br><span class="line"><span class="keyword">const</span> sym = <span class="built_in">Symbol</span>(<span class="string">'foo'</span>);</span><br><span class="line"><span class="built_in">String</span>(sym) <span class="comment">// "Symbol(foo)"</span></span><br><span class="line">sym.toString() <span class="comment">// "Symbol(foo)"</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//新</span></span><br><span class="line"><span class="keyword">const</span> sym = <span class="built_in">Symbol</span>(<span class="string">'foo'</span>);</span><br><span class="line">sym.description <span class="comment">// "foo"</span></span><br></pre></td></tr></table></figure>

<h1 id="http-amp-ajax"><a href="#http-amp-ajax" class="headerlink" title="http&amp;ajax"></a>http&amp;ajax</h1><h2 id="TCP-IP-三次握手和四次挥手"><a href="#TCP-IP-三次握手和四次挥手" class="headerlink" title="TCP/IP 三次握手和四次挥手"></a>TCP/IP 三次握手和四次挥手</h2><ul>
<li>意义</li>
</ul>
<ol>
<li>三次握手：意义在于防止已失效的链接请求报文端突然又传送到了服务端，因而产生错误，主要是为了防止资源的浪费。</li>
<li>四次挥手：为了保证在最后断开的时候，客户端能够发送最后一个ACK（acknowledgement-确认）数据包能够被服务端接收到。</li>
</ol>
<ul>
<li>三次握手</li>
</ul>
<ol>
<li>客户端向服务的发送SYN（synchronous-同步的）码数据包，<code>表示客户端要向服务端建立连接</code></li>
<li>服务端收到客户端的连接请求后，会发送ACK（acknowledgement-确认）码数据包给客户端，<code>表示连接请求已经收到，再次向客户端确认是否需要真的简历连接</code></li>
<li>客户端在收到ACK码后会检验其是否正确。如果正确，则客户端会再次发送ACK码数据包给服务端，表示确立连接。</li>
<li>在以上三次握手都成功后，才会真的建立起连接，并且发送数据。</li>
</ol>
<ul>
<li>四次挥手</li>
</ul>
<ol>
<li>当客户端发送完数据后，会给服务端发送FIN（finally-最后的意思）码数据包，表示数据已经传递完了</li>
<li>当服务端收到之后，会发生ACK码数据包给客户端，表示已经知道数据传送完了。客户端收到之后，就会关闭传送的通道</li>
<li>服务端会发送一个FIN，表示告知客户端数据已经发送完毕</li>
<li>当客户端收到FIN之后，会发送一个ACK（acknowledgement）。表示客户端已经知道数据发送完毕。然后客户端会关闭到传送的通道</li>
</ol>
<h2 id="http常用的状态码"><a href="#http常用的状态码" class="headerlink" title="http常用的状态码"></a>http常用的状态码</h2><ol>
<li>2xx ：表示成功</li>
</ol>
<ul>
<li>200 OK</li>
<li>204 请求成功，但是服务端没有内容返回</li>
</ul>
<ol start="2">
<li><p>3xx ：重定向</p>
</li>
<li><p>4xx ：客户端错误</p>
</li>
</ol>
<ul>
<li>400 参数传递不当</li>
<li>401 权限不够</li>
<li>403 服务端已经理解了请求，但是拒绝响应</li>
<li>404 客户端请求的资源或者数据不存在，一般原因有两个：写错了接口、服务端还没部署</li>
</ul>
<ol start="4">
<li>5xx ：服务端错误</li>
</ol>
<ul>
<li>500 服务端内部错误</li>
<li>502 网关错误</li>
</ul>
<h2 id="浏览器从输入url到页面显示都发生了什么"><a href="#浏览器从输入url到页面显示都发生了什么" class="headerlink" title="浏览器从输入url到页面显示都发生了什么"></a>浏览器从输入url到页面显示都发生了什么</h2><p>大致的步骤：</p>
<ol>
<li>首先根据域名通过DNS查询到IP</li>
<li>通过IP向服务器发起TCP连接</li>
<li>向服务器发起请求</li>
<li>服务器返回内容</li>
<li>浏览器解析渲染页面并且显示</li>
<li>关闭连接</li>
</ol>
<h2 id="http和https的区别"><a href="#http和https的区别" class="headerlink" title="http和https的区别"></a>http和https的区别</h2><ol>
<li>https协议是由ssl+htpp协议构建的可进行加密传输、身份认知的网络协议，比http安全。</li>
<li>http是超文本传输协议，而https是具有安全性的ssl加密传输协议</li>
<li>连接方式也不同，端口号也不同（http为80，https为443）</li>
</ol>
<p>https：保护内容隐私；可确认对方的身份；防止内容篡改</p>
<h2 id="浏览器的缓存（强缓存、协商缓存）"><a href="#浏览器的缓存（强缓存、协商缓存）" class="headerlink" title="浏览器的缓存（强缓存、协商缓存）"></a>浏览器的缓存（强缓存、协商缓存）</h2><ul>
<li>什么是浏览器缓存呢？</li>
</ul>
<p>简单来说，就是浏览器保存通过http获取到的数据，即将数据存储在本地（浏览器中）。</p>
<ul>
<li>缓存的资源去哪儿了呢?</li>
</ul>
<p>memory cache：将资源缓存到内存，等待下次访问时，就直接从内存中获取。适合存放JS脚本、字体、图片等<br>disk cache：将资源保存到磁盘中，等待下次访问时，就直接从磁盘中获取。适合存放css文件等</p>
<ul>
<li>三级缓存原理（访问缓存的优先级）</li>
</ul>
<ol>
<li>现在内存中查询</li>
<li>再去磁盘中查询</li>
<li>再去网路请求</li>
<li>再将请求的数据缓存</li>
</ol>
<h2 id="get和post的区别"><a href="#get和post的区别" class="headerlink" title="get和post的区别"></a>get和post的区别</h2><p>get：一般用域信息的获取<br>post：一般用于修改服务器上的资源</p>
<h2 id="同源策略问题"><a href="#同源策略问题" class="headerlink" title="同源策略问题"></a>同源策略问题</h2><ul>
<li>什么是源策略？</li>
</ul>
<ol>
<li>同源策略是JS的重要安全度量标准，主要是为了防止某个文档从多个不同源去装载。</li>
<li>同源策略指的是协议、端口、域名都要相同，缺一不可。</li>
</ol>
<ul>
<li>为什么会有同源策略？</li>
</ul>
<p>比如说，有一个坏人，将银行的登陆页面嵌入到他的山寨页面中，当用户输入真的用户名、密码后，坏人就可以通过JS读取到表单输入的内容。这样信息就被盗取了。</p>
<h2 id="解决跨域问题"><a href="#解决跨域问题" class="headerlink" title="解决跨域问题"></a>解决跨域问题</h2><ul>
<li><p>jsonp</p>
</li>
<li><p>原理：利用script标签没有跨域限制的漏洞</p>
</li>
<li><p>cors</p>
</li>
<li><p>关键点在于cors需要浏览器和客户端同时支持。</p>
</li>
<li><p>但是关键在于后端。只需要设置：<code>Access-Control-Allow-Origin</code>就可以开启cors</p>
</li>
<li><p>nginx</p>
</li>
<li><p>websocket</p>
</li>
</ul>
<h1 id="防抖函数-amp-节流函数"><a href="#防抖函数-amp-节流函数" class="headerlink" title="防抖函数&amp;节流函数"></a>防抖函数&amp;节流函数</h1><p>之前一直不懂什么是防抖和节流。其实顾名思义，假设有一个需求，是鼠标停止时页面弹出alert，但是如果不进行防抖或者节流，鼠标只要一移动就会不断的发生弹出事件。</p>
<p>概念：</p>
<ul>
<li>函数节流: 频繁触发,但只在特定的时间内才执行一次代码</li>
<li>函数防抖: 频繁触发,但只在特定的时间内没有触发执行条件才执行一次代码</li>
</ul>
<p>可以发现，两者前提都是频繁的触发。节流就是只执行一次代码；防抖就是在某一个时间点内没有被触发时执行代码。</p>
<h1 id="Vue"><a href="#Vue" class="headerlink" title="Vue"></a>Vue</h1><h2 id="什么是生命周期"><a href="#什么是生命周期" class="headerlink" title="什么是生命周期"></a>什么是生命周期</h2><p>Vue实例从创建到销毁的过程就是生命周期</p>
<h2 id="生命周期的作用"><a href="#生命周期的作用" class="headerlink" title="生命周期的作用"></a>生命周期的作用</h2><p>生命周期中由多个钩子函数，可以使得在控制vue逻辑时更加方便。比如说创建的时候要发生什么，更新的时候发生什么。</p>
<h2 id="生命周期有几个阶段"><a href="#生命周期有几个阶段" class="headerlink" title="生命周期有几个阶段"></a>生命周期有几个阶段</h2><p>总共有八个阶段</p>
<p>创建前后：beforeCreate、created<br>载入前后：beforeMount、mounted<br>更新前后：beforeUpdate、updated<br>销毁前后：beforeDestroy、destroyed</p>
<h2 id="第一次页面加载会触发什么钩子函数"><a href="#第一次页面加载会触发什么钩子函数" class="headerlink" title="第一次页面加载会触发什么钩子函数"></a>第一次页面加载会触发什么钩子函数</h2><p>beforeCreate、created、beforeMount、mounted</p>
<h2 id="DOM渲染在哪儿个周期中完成"><a href="#DOM渲染在哪儿个周期中完成" class="headerlink" title="DOM渲染在哪儿个周期中完成"></a>DOM渲染在哪儿个周期中完成</h2><p>mounted</p>
<h2 id="生命周期分别适合什么场景"><a href="#生命周期分别适合什么场景" class="headerlink" title="生命周期分别适合什么场景"></a>生命周期分别适合什么场景</h2><p>beforeCreate：可以在这里加上loading事件<br>created：可以在这里写loading结束事件，异步请求也适合在这里，比如请求数据<br>mounted：挂载元素，获取dom节点<br>boforeDestroy：可以做一个确认停止的确认框<br>nextTick：更新数据后立即操作dom</p>
<h2 id="v-show和v-if的区别"><a href="#v-show和v-if的区别" class="headerlink" title="v-show和v-if的区别"></a>v-show和v-if的区别</h2><p>v-show是css切换（display：none），适合频繁操作<br>v-if是操作dom（销毁和重新创建），适合在较少改变时使用</p>
<h2 id="vue组件data为什么必须是函数"><a href="#vue组件data为什么必须是函数" class="headerlink" title="vue组件data为什么必须是函数"></a>vue组件data为什么必须是函数</h2><p>因为组件是可以复用的。JS里对象是引用的关系，假如data是一个对象，那么子组件就会互相污染。所以组件的data必须是函数。</p>

    </div>

    
    
    

      <footer class="post-footer">

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/2020/07/24/Vue+ElementUI%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5/" rel="prev" title="Vue+ElementUI最佳实践">
      <i class="fa fa-chevron-left"></i> Vue+ElementUI最佳实践
    </a></div>
      <div class="post-nav-item">
    <a href="/2020/08/06/%E5%9B%BE%E7%89%87%E6%B5%8B%E8%AF%95/" rel="next" title="图片测试">
      图片测试 <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  

  </div>


          </div>
          

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#ES6新特性"><span class="nav-number">1.</span> <span class="nav-text">ES6新特性</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#var-let-const"><span class="nav-number">1.1.</span> <span class="nav-text">var let const</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#JS变量的过程"><span class="nav-number">1.1.1.</span> <span class="nav-text">JS变量的过程</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#class"><span class="nav-number">1.2.</span> <span class="nav-text">class</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#Object-getPrototypeOf"><span class="nav-number">1.2.1.</span> <span class="nav-text">Object.getPrototypeOf()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#proto"><span class="nav-number">1.2.2.</span> <span class="nav-text">proto</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#export-import"><span class="nav-number">1.3.</span> <span class="nav-text">export&#x2F;import</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#new-Set"><span class="nav-number">1.4.</span> <span class="nav-text">new Set</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Symbol"><span class="nav-number">1.5.</span> <span class="nav-text">Symbol</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#es2019新增description"><span class="nav-number">1.5.1.</span> <span class="nav-text">es2019新增description</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#http-amp-ajax"><span class="nav-number">2.</span> <span class="nav-text">http&amp;ajax</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#TCP-IP-三次握手和四次挥手"><span class="nav-number">2.1.</span> <span class="nav-text">TCP&#x2F;IP 三次握手和四次挥手</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#http常用的状态码"><span class="nav-number">2.2.</span> <span class="nav-text">http常用的状态码</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#浏览器从输入url到页面显示都发生了什么"><span class="nav-number">2.3.</span> <span class="nav-text">浏览器从输入url到页面显示都发生了什么</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#http和https的区别"><span class="nav-number">2.4.</span> <span class="nav-text">http和https的区别</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#浏览器的缓存（强缓存、协商缓存）"><span class="nav-number">2.5.</span> <span class="nav-text">浏览器的缓存（强缓存、协商缓存）</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#get和post的区别"><span class="nav-number">2.6.</span> <span class="nav-text">get和post的区别</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#同源策略问题"><span class="nav-number">2.7.</span> <span class="nav-text">同源策略问题</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#解决跨域问题"><span class="nav-number">2.8.</span> <span class="nav-text">解决跨域问题</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#防抖函数-amp-节流函数"><span class="nav-number">3.</span> <span class="nav-text">防抖函数&amp;节流函数</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#Vue"><span class="nav-number">4.</span> <span class="nav-text">Vue</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#什么是生命周期"><span class="nav-number">4.1.</span> <span class="nav-text">什么是生命周期</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#生命周期的作用"><span class="nav-number">4.2.</span> <span class="nav-text">生命周期的作用</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#生命周期有几个阶段"><span class="nav-number">4.3.</span> <span class="nav-text">生命周期有几个阶段</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#第一次页面加载会触发什么钩子函数"><span class="nav-number">4.4.</span> <span class="nav-text">第一次页面加载会触发什么钩子函数</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#DOM渲染在哪儿个周期中完成"><span class="nav-number">4.5.</span> <span class="nav-text">DOM渲染在哪儿个周期中完成</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#生命周期分别适合什么场景"><span class="nav-number">4.6.</span> <span class="nav-text">生命周期分别适合什么场景</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#v-show和v-if的区别"><span class="nav-number">4.7.</span> <span class="nav-text">v-show和v-if的区别</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#vue组件data为什么必须是函数"><span class="nav-number">4.8.</span> <span class="nav-text">vue组件data为什么必须是函数</span></a></li></ol></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <p class="site-author-name" itemprop="name">Edison</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives/">
        
          <span class="site-state-item-count">124</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
          
        <span class="site-state-item-count">21</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
          
        <span class="site-state-item-count">19</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>



      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

<div class="copyright">
</div>
  <div class="powered-by">山高水远  一定相见
  </div>
<div></div>
<div class="theme-info">
  <div class="powered-by"></div>
  <span class="post-count">至今已写107.1k字</span>
</div>

        








      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>
  <script src="/lib/velocity/velocity.min.js"></script>
  <script src="/lib/velocity/velocity.ui.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/pisces.js"></script>


<script src="/js/next-boot.js"></script>




  















  

  

</body>
</html>
